/**
 * Created by dazq on 16/11/22.
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component,PropTypes } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableHighlight,
    NavigatorIOS,
} from 'react-native';
import Navigator_next from './Navigator_next'

export default class HelloWorld extends Component {
    static propTypes = {
        title: PropTypes.string.isRequired,
        navigator: PropTypes.object.isRequired,
    }
    constructor(props, context) {
        super(props, context);
        this._onForward = this._onForward.bind(this);
    }
    _onForward() {
        this.props.navigator.push({
            title: 'Scene ',
            component:Navigator_next,
        });
    }
    _onPop() {
        if(this.props.index>0)
            this.props.navigator.pop();
    }
    render() {
        return (
            <View style={[styles.row,styles.height160,{marginTop:44}]}>
                <View style={[styles.height160, styles.part_1_left]}>
                    <Text style={[styles.font14, styles.marTop18, styles.marLeft10, styles.green]}>我们约吧</Text>
                    <Text style={[styles.font10, styles.marTop14, styles.marLeft10]}>恋爱家人好朋友</Text>
                    <Image style={[styles.yue]} source={{uri: 'http://p0.meituan.net/mmc/fe4d2e89827aa829e12e2557ded363a112289.png'}}></Image>
                </View>
                <View style={[styles.height160, styles.part_1_right]}>

                    <Text style={[styles.font14, {marginLeft:30}, styles.marTop18,styles.red]}>超低价值</Text>
                    <Text style={[styles.font14, {fontSize:12, marginTop:14, marginLeft:30,color: 'black'}]}>十元惠生活</Text>
                    <Image style={{height:25,width:25, alignSelf: 'center'}} source={{uri: 'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}></Image>


                    <View style={[{flex:1, flexDirection: 'row',borderTopWidth:0.5, borderColor:'#DDD8CE'}]}>
                        <View style={{flex:1, borderRightWidth:1, borderColor:'#DDD8CE'}}>
                            <Text style={{color:'#F742AB', marginLeft:5,fontWeight:'bold', fontSize:15, marginTop:8}}>聚餐宴请</Text>
                            <Text style={{fontSize:12,marginTop:4, marginLeft:5}}>朋友家人常聚聚</Text>
                            <Image style={{height:25,width:25, alignSelf: 'center'}} source={{uri: 'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}></Image>
                        </View>
                        <View style={{flex:1, borderRightWidth:1, borderColor:'#DDD8CE'}}>
                            <Text style={{color:'#F742AB', marginLeft:5,fontWeight:'bold', fontSize:15, marginTop:8}}>聚餐宴请</Text>
                            <Text style={{fontSize:12,marginTop:4, marginLeft:5}}>朋友家人常聚聚</Text>
                            <Image style={{height:25,width:25, alignSelf: 'center'}} source={{uri: 'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}></Image>
                        </View>
                    </View>
                    <ComponentExample name="daizi" style={{flex:1}}></ComponentExample>

                </View>
                <View>
                    <Text>Current Scene: { this.props.titles }</Text>
                    <TouchableHighlight onPress={this._onForward}>
                        <Text>点我进入下一场景</Text>
                    </TouchableHighlight>
                    <TouchableHighlight onPress={this._onPop}>
                        <Text>点我返回上一场景</Text>
                    </TouchableHighlight>
                </View>
            </View>

        );
    }
}

class ComponentExample extends Component{
    constructor(props) {
        super(props);
        this.state = { showText: true };

        // 每1000毫秒对showText状态做一次取反操作
        setInterval(() => {
            this.setState({ showText: !this.state.showText });
        }, 1000);
    }

    render() {
        let display = this.state.showText ? this.props.name : ' ';

        return(
            <View style={{flex:1, borderRightWidth:1, borderColor:'#DDD8CE'}}>
                <Text>This is my name {display}</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    height160:{
        height:160,
    },
    part_1_left:{
        flex: 1,
        borderColor: '#DCD7CD',
        borderRightWidth: 0.5,
        borderBottomWidth: 1,
    },
    part_1_right:{
        flex: 2,
        borderColor: '#DCD7CD',
        borderRightWidth: 0.5,
        borderBottomWidth: 1,
    },
    font14:{
        fontSize:14,
    },
    font10:{
        fontSize:12,
    },
    row:{
        flexDirection: 'row',
        paddingTop:20
    },
    marLeft10:{
        marginLeft:10
    },
    marTop18:{
        marginTop:18,
    },
    marTop14:{
        marginTop:14,
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    yue:{
        height:80,
    },
    green:{
        color:'#55A44B',
        fontWeight: '900'
    },
    red:{
        color: '#FF3F0D',
        fontWeight: '900'
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color:'red',
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    pic: {
        width:100,
        height:100,
    }
});

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
